<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">


    <title>收费统计页面</title>
    <meta content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台" name="keywords">
    <meta content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术" name="description">

    <link href="../../static/favicon.ico" rel="shortcut icon" th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"
          th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}">
    <link href="../../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"
          th:href="@{/static/css/font-awesome.css(v='4.4.0')}">
    <link href="../../static/css/animate.css" rel="stylesheet" th:href="@{/static/css/animate.css}">
    <link href="../../static/css/style.css?v=4.1.0" rel="stylesheet" th:href="@{/static/css/style.css(v='4.1.0')}">
    <!-- bootstrap-datepicker -->
    <link href="../../static/css/plugins/datapicker/datepicker3.css"
          rel="stylesheet" th:href="@{/static/css/plugins/datapicker/datepicker3.css}">
    <!--sweetalert.css-->
    <link href="../../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css}">


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>收费统计</h5>

                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal" id="addForm" method="post" name="addForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">统计时段</label>
                                <div class="col-sm-10">
                                    <label class="radio-inline">
                                        <input checked name="unit" type="radio" value="1"> 月
                                    </label>
                                    <label class="radio-inline">
                                        <input name="unit" type="radio" value="2"> 季
                                    </label>
                                    <label class="radio-inline">
                                        <input name="unit" type="radio" value="3"> 年
                                    </label>
                                </div>
                            </div>

                            <!--月、季模式-->
                            <div class="form-group" id="div_month">
                                <label class="col-sm-2 control-label">查找年份</label>
                                <div class="col-sm-2">
                                    <select class="single-line form-control" name="yearOfSelect">
                                    </select>
                                </div>
                            </div>

                            <!--年-->
                            <div class="form-group" id="div_year" style="display: none">
                                <label class="col-sm-2 control-label">开始年份</label>
                                <div class="col-sm-2">
                                    <select class="single-line form-control" name="beginYear">
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label">结束年份</label>
                                <div class="col-sm-2">
                                    <select class="single-line form-control" name="endYear">
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-2 col-sm-offset-2">
                                    <button class="btn btn-success" id="bind_confirm" type="button">统计</button>
                                    <button class="btn btn-white" type="reset">取消</button>
                                </div>
                                <div class="col-sm-1 col-sm-offset-7">
                                    <a class="btn btn-warning center-block" onclick="window.location.reload()">刷新数据</a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-offset-2" id="main" style="width: 800px;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>

<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0" th:src="@{/static/js/content.js(v='1.0.0')}"></script>

<!-- Peity -->
<script src="../../static/js/plugins/peity/jquery.peity.min.js"
        th:src="@{/static/js/plugins/peity/jquery.peity.min.js}"></script>

<!-- Peity -->
<!-- <script src="../../static/js/demo/peity-demo.js" th:src="@{/static/js/demo/peity-demo.js}"></script> -->


<!-- Data picker -->
<script src="../../static/js/plugins/datapicker/bootstrap-datepicker.js"
        th:src="@{/static/js/plugins/datapicker/bootstrap-datepicker.js}"></script>
<script src="../../static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{/static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js}"></script>
<script src="../../static/js/plugins/echarts/echarts-all.js"
        th:src="@{/static/js/plugins/echarts/echarts-all.js}"></script>
<!--sweetalert-->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>

<script type="text/javascript">
    $(function () {
        /*时间控件配置*/
        $('#myDate').datepicker({
            language: "zh-CN",
            clearBtn: true,//清除
            autoclose: true,
            todayHighlight: true,
            format: 'yyyy-mm-dd',
            todayBtn: false,//今日按钮
            startDate: '1970-1-1', //与你自己设置的格式一致yyyy-mm-dd，未设置的话与默认格式一致mm/dd/yyyy
            endDate: '2070-1-1'
        });
    });
</script>


<script>
    $(function () {
        // 图表初始化
        var chart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data: ['收费']
            },
            xAxis: {
                name: "收费",
                data: []  //["1月","2月","3月","4月","5月","6月"]
            },
            yAxis: {
                name: "收费金额"
            },
            series: [{
                name: '收费',
                type: 'bar',
                data: []    //[5, 20, 36, 10, 10, 20]
            }, {
                name: '收费',
                type: 'line',
                data: []     //data: [5, 20, 36, 10, 10, 20]
            }
            ]
        };

        $("#bind_confirm").click(function () {

            var form = document.forms["addForm"];
            $.ajax({
                method: 'POST',
                url: "/statistics/cardCostMonthOrSeasonOrYear",
                data: $(form).serialize(),
                success: function (data) {
                    if (data.code === 0) {
                        var info = data.data;
                        option.title.text = info.title;
                        option.xAxis.data = info.time;
                        option.xAxis.name = info.xname;
                        option.series[0].data = info.data;
                        option.series[1].data = info.data;
                        chart.setOption(option, true);
                    } else {
                        swal("统计错误!", data.msg, "info");
                    }
                }
            });
            return false;
        });
        // 选择不现统计单位时，改变选择框
        $(":radio[name=unit]").click(function () {
            if (this.value == 3) {
                $("#div_month").hide();
                $("#div_year").show();
            } else {
                $("#div_month").show();
                $("#div_year").hide();
            }

        });

        let yearListSave = "";
        $.post("[[${#request.getContextPath()}]]/statistics/yearList", function (data) {
            yearListSave = data.data;
            for (let i = 0; i < yearListSave.length; i++) {
                $(".single-line.form-control").append("<option  value='" + yearListSave[i] + "'>" + yearListSave[i] + "</option>");
            }
        });

        /* 选中的列表项 */
        $(".single-line.form-control").change(function () {
            var selectOne = $(this).val();
            for (var i = 0; i < yearListSave.length; i++) {
                $("option[value='" + yearListSave[i] + "']").attr("selected", "");
                if (selectOne === yearListSave[i]) {
                    $("option[value='" + selectOne + "']").attr("selected", "selected");
                }
            }
        });
    })

</script>


</body>

</html>
